<template>
	<view class="wallet">
		<!-- S 顶部导航 -->
		<sol-navbar title="我的钱包"></sol-navbar>
		<!-- E 顶部导航 -->
		
		<!-- S 时间碎片 -->
		<view class="wallet-box">
			<view class="wallet-box_value line-1">32</view>
			<view class="wallet-box_text">时间碎片</view>
			<view class="wallet-box_btns">
				<button class="wallet-box_btn wallet-box_btn-recharge" @click="fnRechargeClick('open')">充值</button>
				<button class="wallet-box_btn wallet-box_btn-withdrawal" @click="fnWithdrawalClick('open')">提现</button>
			</view>
		</view>
		<!-- E 时间碎片 -->

		<!-- S 标签文字 -->
		<view class="wallet-label">过往账单</view>
		<!-- E 标签文字 -->
		
		<!-- S 过往账单列表 -->
		<view class="wallet-list">
			<view class="wallet-bill" v-for="bill in billList" :key=bill.id>
				<view class="wallet-bill_upper">
					<template v-if="!bill.title">
						<sol-avatar class="wallet-bill_upper-mr12"  v-for="user in bill.userList" :key="user.uid"  :src="user.avatar" size="sm"></sol-avatar>
						<sol-avatar src="/static/icon-default/icon_more.png" size="sm" v-if="bill.userList.length > 5"></sol-avatar>
					</template>
					<text v-else v-text="bill.title">名称</text>
				</view>
				<view class="wallet-bill_in">
					<text v-text="bill.describe">描述</text>
					<text>{{bill.consumptionType==2 ? '+':'-'}} {{bill.consumption}}</text>
				</view>
				<view class="wallet-bill_lower">
					<text v-text="bill.time">时间</text>
					<text>时间碎片：{{bill.surplus || 0}}</text>
				</view>
			</view>
		</view>
		<!-- E 过往账单列表 -->

		<!-- S 弹出充值碎片 -->
		<sol-drawer v-model="recharge.open" title="充值碎片" primary-text="确认充值" cancel-text="取消" @click="fnRechargeClick">
			<template v-slot:default>
				<view class="wallet_recharge">
					<view class="wallet_recharge-label">输入充值金额（1块碎片=1元）</view>
					<input class="wallet_recharge-money" type="number" placeholder="1块碎片=1元" :maxlength="3"
						v-model="recharge.money" />
					<view class="wallet_recharge-label">充值方式</view>
					<view class="wallet_recharge-pay">
						<view class="wallet_recharge-pay-type" @click="()=> recharge.type = 1">
							<sol-radio name="1" :value="recharge.type" color="#576069" colorChecked="#607d8b" :size="36">
							</sol-radio>
							<text class="wallet_recharge-pay-type_text">支付宝</text>
						</view>
						<view class="wallet_recharge-pay-type" @click="()=> recharge.type = 2">
							<sol-radio name="2" :value="recharge.type" color="#576069" colorChecked="#607d8b" :size="36">
							</sol-radio>
							<text class="wallet_recharge-pay-type_text">微信</text>
						</view>
					</view>
				</view>
			</template>
		</sol-drawer>
		<!-- E 弹出充值碎片 -->

		<!-- S 弹出申请提现 -->
		<sol-drawer v-model="withdrawal.open" primary-text="确认申请" cancel-text="取消" @click="fnWithdrawalClick">
			<template v-slot:default>
				<view class="wallet_withdrawal">
					<view class="account">
						<view class="account-left">
							<view class="account-left_type">
								<image class="account-left_type-icon" src="/static/icon-default/icon_alipay.png"
									mode="scaleToFill"></image>
								<text class="account-left_type-title">支付宝账号</text>
							</view>
							<view class="account-left_number" v-text="withdrawal.account">130xxxx1234</view>
						</view>
						<view class="account-right">更改</view>
					</view>
					<view class="wallet_withdrawal-label">
						<text>可提现金额32元 (1块碎片=1元)</text>
						<text class="wallet_withdrawal-label_link">全部</text>
					</view>
					<input class="wallet_withdrawal-money" type="number" placeholder="仅提现10元起" :maxlength="3"
						v-model="withdrawal.money" />
				</view>
			</template>
		</sol-drawer>
		<!-- E 弹出申请提现 -->
		
		<view class="safe-area-inset-bottom" style="height: 96rpx;"></view>
	</view>
</template>

<script>
	export default {
		name: "Wallet",
		data() {
			return {
				// 充值碎片
				recharge: {
					// 弹出
					open: false,
					// 比例文字
					rateText: '1块碎片=1元',
					// 充值金额
					money: null,
					// 充值方式
					type: 1,
				},
				// 申请提现
				withdrawal: {
					// 弹出
					open: false,
					// 提现金额
					money: null,
					// 提现方式
					type: 1,
					// 提现账号
					account: '130xxxx1234',
				},
				// 账单列表
				billList: [
					{
						id: '110',
						title: "提现",
						describe: "已兑换提现￥60元现金", // 描述
						consumption: "60", // 消费
						consumptionType: 1, // 消费类型 0未知 1扣除 2收益
						surplus: "32", // 累计剩余金额
						time: '2021.02.03 09:03:01'
					},
					{
						id: '111',
						title: "充值",
						describe: "已成功充值10块时间碎片", // 描述
						consumption: "10", // 消费
						consumptionType: 2, // 消费类型 0未知 1扣除 2收益
						surplus: "10", // 累计剩余金额
						time: '2021.02.01 09:03:01'
					},
					{
						id: '112',
						title: "开通会员",
						describe: "已成功开通会员赠送10块时间碎片", // 描述
						consumption: "10", // 消费
						consumptionType: 2, // 消费类型 0未知 1扣除 2收益
						surplus: "20", // 累计剩余金额
						time: '2021.02.01 09:03:01'
					},
					{
						id: '113',
						title: "",
						userList: [
							{
								uid: '121',
								avatar: "/static/logo.png"
							},{
								uid: '122',
								avatar: "/static/logo.png"
							},{
								uid: '123',
								avatar: "/static/logo.png"
							},{
								uid: '124',
								avatar: "/static/logo.png"
							},{
								uid: '125',
								avatar: "/static/logo.png"
							},
						],
						describe: "沉默的牛5人查看全部内容", // 描述
						consumption: "80", // 消费
						consumptionType: 2, // 消费类型 0未知 1扣除 2收益
						surplus: "90", // 累计剩余金额
						time: '2021.02.01 12:03:01'
					}
				]
			};
		},
		computed: {},
		methods: {
			// 充值碎片点击
			fnRechargeClick(type = '', value = 0){
				this.$log('fnRechargeClick=>', type, value)
				switch(type){
					case 'open': // 弹出
					this.recharge.open = true;
					break;
					case 'primary': // 确定
					break;
					case 'mask': // 遮罩
					case 'cancel': // 取消
					this.recharge = Object.assign({}, this.recharge, {
						// 弹出
						open: false,
						// 充值金额
						money: null,
						// 充值方式
						payType: 1,
					});
					break;
				}
			},
			// 申请提现点击
			fnWithdrawalClick(type = '', value = 0){
				this.$log('fnWithdrawalClick=>', type, value)
				switch(type){
					case 'open':
					this.withdrawal.open = true;
					break;
					case 'primary': // 确定
					break;
					case 'mask': // 遮罩
					case 'cancel': // 取消
					this.withdrawal = Object.assign({}, this.withdrawal, {
						// 弹出
						open: false,
						// 提现金额
						money: null,
						// 提现方式
						type: 1,
						// 提现账号
						account: '130xxxx1234',
					});
					break;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	// 账单项
	.wallet-bill{
		border-radius: 24rpx;
		background-color: #474e54;
		padding: 28rpx;
		margin-bottom: 28rpx;
		
		&_upper{
			font-size: 28rpx;
			font-weight: 400;
			color: #607D8B;
			letter-spacing: 4rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			&-mr12{
				margin-right: 12px;
			}
		}
		&_in{
			font-size: 28rpx;
			font-weight: bold;
			color: #DDDDDD;
			padding: 24rpx 0;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			letter-spacing: 4rpx;
		}
		&_lower{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #878787;
		}
	}
	
	.wallet {
		min-height: 100vh;
		background-color: $--color-background;

		// 时间碎片
		&-box {
			padding-top: 64rpx;
			
			&_value{
				font-size: 48rpx;
				font-weight: bold;
				color: #DDDDDD;
				width: 80%;
				text-align: center;
				margin: auto;
				letter-spacing: 4rpx;
			}
			&_text{
				font-size: 28rpx;
				font-weight: 400;
				color: #BBBBBB;
				text-align: center;
				letter-spacing: 4rpx;
				padding: 20rpx 0 72rpx;
			}
			&_btns {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
			
			&_btn {
				width: 220rpx;
				height: 90rpx;
				border-radius: 90rpx;
				line-height: 90rpx;
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 4rpx;
				margin: 0;
			
				&-recharge {
					background-color: #607d8b;
					color: #DDDDDD;
				}
			
				&-withdrawal {
					background-color: #474e54;
					color: #DDDDDD;
					margin-left: 64rpx;
				}
			}
		}
		
		// 标签文字
		&-label {
			padding: 32rpx 28rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #DDDDDD;
		}
		
		// 账单列表
		&-list {
			padding: 0 28rpx;
		}


		// 充值碎片
		&_recharge {
			padding: 42rpx 0;
			
			&-label {
				font-size: 28rpx;
				font-weight: 400;
				color: #BBBBBB;
				padding: 28rpx 0px;
			}

			&-money {
				height: 90rpx;
				line-height: 90rpx;
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 4rpx;
				color: #DDDDDD;
				border-radius: 24rpx;
				background-color: #576069;
				padding: 0 28rpx;
			}

			&-pay {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;

				&-type {
					width: 200rpx;
					height: 88rpx;
					border-radius: 88rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
					background-color: #474e54;
					font-size: 32rpx;
					font-weight: 400;
					letter-spacing: 4rpx;
					color: #878787;
					padding: 0 28rpx;

					&_text {
						margin-left: 28rpx;
					}
				}
			}
		}

		// 申请提现
		&_withdrawal {
			padding: 42rpx 0;
			
			.account {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 6rpx #50585e solid;
				padding-bottom: 28rpx;

				&-left {
					display: flex;
					flex-direction: column;

					&_type {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						margin-bottom: 28rpx;

						&-icon {
							width: 56rpx;
							height: 56rpx;
						}

						&-title {
							font-size: 32rpx;
							font-weight: 400;
							color: #DDDDDD;
							letter-spacing: 4rpx;
							margin-left: 12rpx;
						}
					}

					&_number {
						font-size: 32rpx;
						font-weight: 400;
						color: #BBBBBB;
						letter-spacing: 4rpx;
					}
				}

				&-right {
					font-size: 32rpx;
					font-weight: bold;
					color: #DDDDDD;
					letter-spacing: 4rpx;
				}
			}

			&-label {
				font-size: 28rpx;
				font-weight: 400;
				color: #BBBBBB;
				padding: 28rpx 0px;

				&_link {
					margin-left: 24rpx;
					font-size: 32rpx;
					color: #607d8b;
				}
			}

			&-money {
				height: 90rpx;
				line-height: 90rpx;
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 4rpx;
				color: #DDDDDD;
				border-radius: 24rpx;
				background-color: #576069;
				padding: 0 28rpx;
			}
		}
	}
</style>
